<script setup>
import { Delete, Edit } from "@element-plus/icons-vue";
import { useExtraStore, usePersistStore, useUserStore } from "@/stores";
import { storeToRefs } from "pinia";
const extraStore = useExtraStore();
const persistStore = usePersistStore();
const { extraList, extraTotal, rfidAllList, rfidAvailableList, userInfo } =
  storeToRefs(persistStore);

const {
  queryData,
  commentVisible,
  infoChecked,
  drawerTitle,
  tobTable,
  addDrawerVisible,
  addTobaccoData,
  addForm,
  choseRfid,
  uploadDraw,
  baseTableData,
  loading,
  showTobaccoPlace,
  rfidInfo,
} = storeToRefs(extraStore);
const {
  tobSizeChange,
  tobPageChange,
  tobDelete,
  clearQueryData,
  clearAddData,
  changeComment,
  infoCheckedChange,
  closeDialog,
  tobEdit,
  multipleChoice,
  searchByrfids,
  submitComment,
  submitQuery,
  submitEvent,
  addTobacco,
  addTobaccRules,
  openUploadDraw,
  showUploadTable,
  delUpload,
  submitUpload,
  getextras,
} = extraStore;
getextras();
</script>

<template>
  <CardPage>
    <template #title>备料基本信息展示</template>
    <template #button>
      <div>
        <el-button type="primary" @click="searchByrfids" class="button"
          >查找</el-button
        >
        <el-button
          type="primary"
          v-if="userInfo.job == 1"
          class="button"
          @click="addTobacco"
          >添加</el-button
        >
        <el-button
          type="primary"
          v-if="userInfo.job == 1"
          class="button"
          @click="openUploadDraw"
          >导入</el-button
        >
      </div>
    </template>
    <!-- 备料条件搜索表单 -->
    <el-form :inline="true" class="demo-form-inline" :model="queryData">
      <el-form-item label="名称">
        <el-input v-model.tirm="queryData.name" />
      </el-form-item>

      <el-form-item>
        <el-button class="button" type="primary" @click="submitQuery"
          >搜索</el-button
        >
        <el-button class="button" @click="clearQueryData">清空</el-button>
      </el-form-item>
    </el-form>
    <!-- 管理员备料基本信息展示表格 -->
    <el-table
      :data="extraList"
      @selection-change="multipleChoice"
      v-if="userInfo.job == 1"
      border
      stripe
      style="width: 65%; height: 25vw; margin-top: 1vw"
      size="small"
      ref="tobTable"
      v-loading="loading"
    >
      <el-table-column type="selection"> </el-table-column>
      <el-table-column type="index" width="50" label="序号"></el-table-column>
      <el-table-column label="RFid号" width="150">
        <template #default="scope">
          <span v-for="item in rfidAllList">
            {{ scope.row.rfid == item.value ? item.value : "" }}
            <el-badge
              is-dot
              class="item"
              :type="item.state == 0 ? 'success' : 'danger'"
              v-if="item.value == scope.row.rfid"
              style="margin-left: 3vw"
            >
            </el-badge>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="产地" width="100" prop="location">
      </el-table-column>
      <el-table-column label="年份" width="80" prop="year"> </el-table-column>
      <el-table-column label="部位" width="80" prop="part"> </el-table-column>
      <el-table-column label="名称" width="150" prop="name"> </el-table-column>
      <el-table-column label="评估状态" width="100">
        <template #default="scope">
          <span v-if="scope.row.evaluate === 0">否</span>
          <span v-else-if="scope.row.evaluate === 1">是</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" width="150">
        <template #default="scope">
          <span>{{ scope.row.info }}</span>
          <el-button
            circle
            plain
            :icon="Edit"
            size="small"
            type="primary"
            @click="changeComment(scope.$index, scope.row)"
            style="float: right"
          ></el-button>
        </template>
      </el-table-column>
      <el-table-column label="编辑" v-if="userInfo.job === 1">
        <template #default="scope">
          <el-button
            :icon="Edit"
            circle
            plain
            size="large"
            type="primary"
            @click="tobEdit(scope.$index, scope.row)"
          >
          </el-button>
          <el-button
            size="large"
            type="danger"
            :icon="Delete"
            circle
            plain
            @click="tobDelete(scope.$index, scope.row)"
          >
          </el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="暂无数据"></el-empty>
      </template>
    </el-table>
    <!-- 普通员工备料信息展示表 -->
    <el-table
      :data="extraList"
      v-if="userInfo.job == 2"
      @selection-change="multipleChoice"
      border
      stripe
      size="small"
      style="width: 58%; height: 25vw; margin-top: 1vw"
      ref="tobTable"
      v-loading="loading"
    >
      <el-table-column type="selection"> </el-table-column>
      <el-table-column type="index" width="70" label="序号"></el-table-column>
      <el-table-column label="RFid号" width="150">
        <template #default="scope">
          <span v-for="item in rfidAllList">
            {{ scope.row.rfid == item.value ? item.value : "" }}
            <el-badge
              is-dot
              class="item"
              :type="item.state == 0 ? 'success' : 'danger'"
              v-if="item.value == scope.row.rfid"
              style="margin-left: 3vw"
            >
            </el-badge>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="产地" width="100" prop="location">
      </el-table-column>
      <el-table-column label="年份" width="80" prop="year"> </el-table-column>
      <el-table-column label="部位" width="80" prop="part"> </el-table-column>
      <el-table-column label="名称" width="150" prop="name"> </el-table-column>
      <el-table-column label="评估状态" width="100">
        <template #default="scope">
          <span v-if="scope.row.evaluate === 0">否</span>
          <span v-else-if="scope.row.evaluate === 1">是</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" width="150" prop="info"> </el-table-column>
      <template #empty>
        <el-empty description="暂无数据"></el-empty>
      </template>
    </el-table>

    <!-- 分页条 -->
    <el-pagination
      v-model:current-page="queryData.page"
      v-model:page-size="queryData.pageSize"
      :page-sizes="[3, 5, 7, 10]"
      background
      layout="sizes, prev, pager, next, jumper,total"
      :total="extraTotal"
      @size-change="tobSizeChange"
      @current-change="tobPageChange"
    />
    <!-- 备料备注修改的弹窗 -->
    <el-dialog v-model="commentVisible" title="修改备注" width="500">
      <el-checkbox-group
        style="display: flex; justify-content: space-around"
        v-model="infoChecked"
        @change="infoCheckedChange"
      >
        <el-checkbox label="异味" value="异味" size="large" border>
        </el-checkbox>
        <el-checkbox label="霉变" value="霉变" size="large" border>
        </el-checkbox>
        <el-checkbox label="生虫" value="生虫" size="large" border>
        </el-checkbox>
        <el-checkbox label="不足" value="不足" size="large" border>
        </el-checkbox>
      </el-checkbox-group>

      <template #footer>
        <div class="dialog-footer">
          <el-button class="button" @click="closeDialog">取消</el-button>
          <el-button class="button" @click="submitComment" type="primary">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 单条备料添加和编辑的抽屉组件 -->
    <el-drawer v-model="addDrawerVisible" size="50%">
      <CardPage>
        <template #title>{{ drawerTitle }}</template>
        <el-form
          id="addForm"
          ref="addForm"
          label-width="5vw"
          :model="addTobaccoData"
          :rules="addTobaccRules"
        >
          <el-form-item label="rfid号" prop="rfid">
            <el-select
              :disabled="!choseRfid"
              v-model="addTobaccoData.rfid"
              placeholder="请选择"
            >
              <el-option
                v-for="item in rfidAvailableList"
                :label="item.value"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="名称" prop="name">
            <el-input
              v-model.tirm="addTobaccoData.name"
              placeholder="请输入备料名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="产地" prop="location"
            ><el-input
              placeholder="请输入产地"
              v-model.tirm="addTobaccoData.location"
            >
            </el-input
          ></el-form-item>
          <el-form-item label="年份" prop="year"
            ><el-input
              placeholder="请输入年份"
              v-model.number="addTobaccoData.year"
            >
            </el-input
          ></el-form-item>
          <el-form-item label="部位" prop="part"
            ><el-input
              placeholder="请输入部位"
              v-model.tirm="addTobaccoData.part"
            >
            </el-input
          ></el-form-item>
          <el-form-item label="评估状态" prop="evaluate">
            <el-select
              placeholder="请选择评估状态"
              v-model="addTobaccoData.evaluate"
            >
              <el-option label="已评估" :value="1" />
              <el-option label="未评估" :value="0" />
            </el-select>
          </el-form-item>
          <el-form-item label="备注"
            ><el-checkbox-group
              style="width: 50%; display: flex; justify-content: space-around"
              v-model="infoChecked"
              @change="infoCheckedChange"
            >
              <el-checkbox label="异味" value="异味" border> </el-checkbox>
              <el-checkbox label="霉变" value="霉变" border> </el-checkbox>
              <el-checkbox label="生虫" value="生虫" border> </el-checkbox>
              <el-checkbox label="不足" value="不足" border> </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
        <div id="button">
          <el-button type="primary" @click="submitEvent">提交</el-button>
          <el-button type="primary" @click="clearAddData">清空</el-button>
        </div>
      </CardPage>
    </el-drawer>
    <!-- 备料搜索位置显示的弹窗 -->
    <el-drawer v-model="showTobaccoPlace" style="font-size: 0.25rem" size="50%">
      <CardPage>
        <template #title
          >单料烟大概位置展示表(x,y坐标之后将会转化成XXX柜子)</template
        >
        <el-table :data="rfidInfo" border stripe>
          <el-table-column
            type="index"
            width="70"
            label="序号"
            style="height: 25vw; margin-top: 1vw"
          ></el-table-column>
          <el-table-column label="实验室" prop="location"></el-table-column>
          <el-table-column label="x坐标" prop="x"></el-table-column>
          <el-table-column label="y坐标" prop="y"></el-table-column>
        </el-table>
      </CardPage>
    </el-drawer>
    <!-- 备料导入的抽屉 -->
    <el-drawer v-model="uploadDraw" size="100%">
      <CardPage>
        <template #title>{{ drawerTitle }}</template>
        <template #button>
          <el-button class="uploadBtn" type="primary" @click="submitUpload"
            >上传文件</el-button
          ></template
        >
        <el-upload
          action
          accept=".xlsx,.xls"
          :show-file-list="false"
          :auto-upload="false"
          :on-change="showUploadTable"
        >
          <template #trigger>
            <el-button type="primary" class="uploadBtn">选择文件</el-button>
          </template>
          <el-button type="danger" class="uploadBtn" @click="delUpload"
            >删除文件</el-button
          >
          <template #tip>
            <el-table
              :data="baseTableData"
              size="small"
              style="width: 100%; height: 25vw; margin: 2vw; display: flex"
              border
              v-if="baseTableData.length"
            >
              <el-table-column type="index" label="序号"></el-table-column>
              <el-table-column prop="rfid" label="RFid号"></el-table-column>
              <el-table-column prop="location" label="产地"></el-table-column>
              <el-table-column prop="year" label="年份"></el-table-column>
              <el-table-column prop="part" label="部位"></el-table-column>
              <el-table-column prop="name" label="名称"></el-table-column>
              <el-table-column prop="evaluate" label="评估状态">
                <template #default="scope">
                  <span v-if="scope.row.evaluate === 0">否</span>
                  <span v-else-if="scope.row.evaluate === 1">是</span>
                </template>
              </el-table-column>
              <el-table-column prop="info" label="备注"></el-table-column>
              <template #empty>
                <el-empty description="没有数据" />
              </template>
            </el-table>
          </template>
        </el-upload>
      </CardPage>
    </el-drawer>
  </CardPage>
</template>
<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.button {
  width: 3vw;
}
.uploadBtn {
  width: 5vw;
  margin-left: 2vw;
}
.el-pagination {
  margin: 3vw 40vw;
}
table {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  margin-top: 1vw;
}
#detail .el-input {
  font-size: 1vw;
}
#addForm {
  margin-top: 3vw;
}
#addForm .el-form-item {
  margin-top: 1vw;
}
#button {
  width: 8vw;
  margin: 3vw;
  display: flex;
  justify-content: space-between;
}
#button .el-button {
  width: 3vw;
}
</style>
